/*
 * @Author: your name
 * @Date: 2021-03-26 09:52:44
 * @LastEditTime: 2021-03-26 15:00:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /day7/touch.js
 */
/*
    封装移动端事件：
    移动端事件：touchstart move end cancel
    1.事件不全面：左滑(swipeLeft)、右滑(swipeRight)、上滑swipeUp、下滑swipeDown都没有，需要封装
    2.解决click事件300ms
*/


//获取元素的函数
function $(selector) {
    //检测selector是否是对象，是表示元素获取过可以直接使用，否则没有获取过需要重新获取
    return typeof selector === "object" ? selector : document.querySelector(selector);
}

var touch = {
    tap: function(el, callBack) { //el元素,callBack要执行的操作
        var endTime = 0;
        var startTime = endTime = 0, //声明存放时间变量
            flag = false; //记录是否移动
        $(el).addEventListener("touchstart", function() {
            startTime = new Date(); //startTime记录当前触碰屏幕的时间
        })
        $(el).addEventListener("touchmove", function() {
            flag = true;
        })
        $(el).addEventListener("touchend", function(e) {
            endTime = new Date(); //startTime记录当前离开屏幕的时间
            //判断 用离开事件-开始触摸的时间<300
            if (endTime - startTime < 300 && !flag) {
                typeof callBack === "function" && callBack(e, this);
            }
        })
    },
    swipe: function(el, eventDir, callBack) { //el 元素  eventDir方向  callBack要执行的操作
        var startPos = null, //存放开始触摸的位置
            endPos = null; //存放结束触摸的位置
        $(el).addEventListener("touchstart", function(e) {
            var event = e.touches[0];
            startPos = {
                x: event.pageX,
                y: event.pageY
            }
        })
        $(el).addEventListener("touchmove", function(e) {
            var event = e.touches[0];
            endPos = {
                x: event.pageX,
                y: event.pageY
            }
        })
        $(el).addEventListener("touchend", function(e) {
            if (startPos && endPos && swipeDir() === eventDir) {
                typeof callBack === "function" && callBack(e, this);
            }

            function swipeDir() {

                var direction = "", //存放方向的字符
                    distance = 50; //设置一段默认距离

                var disX = endPos.x - startPos.x,
                    disY = endPos.y - startPos.y;

                var absX = Math.abs(disX),
                    absY = Math.abs(disY);

                if (absX > distance || absY > distance) {
                    if (absX > absY) {
                        direction = disX > 0 ? "swipeRight" : "swipeLeft";
                    } else {
                        direction = disY > 0 ? "swipeDown" : "swipeUp";
                    }
                }

                return direction;
            }
        })
    }
}


export default touch